<script setup>

const props = defineProps({
    safeAreaInsetTop: {
        type: Boolean,
        default: true
    },
    safeAreaInsetBottom: {
        type: Boolean,
        default: true
    },
})

const popupRef = ref()

const open = () => {
    popupRef.value.open()
}

const close = () => {
    popupRef.value.close()
}

defineExpose({
    open, close
})

const navBarInfo = computed(() => {
    const systemInfo = uni.getSystemInfoSync()
    const statusBarHeight = systemInfo.statusBarHeight
    const result = {statusBarHeight}
    /* #ifdef MP-WEIXIN */
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    const space = menuButtonInfo.top - statusBarHeight
    result.navbarHeight = space + menuButtonInfo.height + space
    /* #endif */
    /* #ifndef MP-WEIXIN */
    result.navbarHeight = 44
    /* #endif */
    return result
})

const emits = defineEmits(['change', 'show', 'hide'])

const StateEnum = {
    show: 'show',
    hide: 'hide'
}

let state = StateEnum.hide

const change = event => {
    emits('change', event)
    if (event.show) {
        state = StateEnum.show
        emits('show')
    } else {
        state = StateEnum.hide
        emits('hide')
    }
}

onBackPress(() => {
    if (state === StateEnum.show) {
        close()
        return true
    }
})


</script>

<template>
    <uni-popup ref="popupRef" type="right" @change="change">
        <view class="bang-side-popup">
            <view class="bang-side-popup__layer" @click="close"/>
            <view class="bang-side-popup__content">
                
                <!--       状态栏高度         -->
                <view :style="{'height':navBarInfo.statusBarHeight+'px'}"/>
                
                <!--       微信导航栏高度         -->
                <!--       #ifdef MP-WEIXIN         -->
                <view :style="{'height':navBarInfo.navbarHeight+'px'}"/>
                <!--       #endif         -->
                
                <!--        H5空白区        -->
                <!--       #ifdef H5         -->
                <view style="height: 32rpx"/>
                <!--       #endif         -->
                
                <!--        非HT5空白区        -->
                <!--       #ifndef H5         -->
                <view style="height: 16rpx"/>
                <!--       #endif         -->
                
                <view class="bang-side-popup__header">
                    <slot name="header"/>
                </view>
                <view class="bang-side-popup__body">
                    <slot/>
                </view>
                <view class="bang-side-popup__footer">
                    <view style="height: 16px"/>
                    <slot name="footer"/>
                    <!--        H5空白区        -->
                    <!--       #ifdef H5         -->
                    <view style="height: 64rpx"/>
                    <!--       #endif         -->
                    
                    <!--        非HT5空白区        -->
                    <!--       #ifndef H5         -->
                    <view style="height: 96rpx"/>
                    <!--       #endif         -->
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="scss">


.bang-side-popup {
    height: 100vh;
    width: 100vw;
    display: flex;
    
    &__layer {
        flex: 1;
        height: 100%;
    }
    
    &__content {
        display: flex;
        flex-direction: column;
        background-color: #FFFFFF;
        width: 600rpx;
        box-sizing: border-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    &__body {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        overflow: auto;
        padding: 0 32rpx;
    }
    
    &__footer {
        padding: 0 32rpx;
    }
}
</style>
